<template >
    <div class="listConBasic" v-if="riskList">
        <div class="listConBasic_f">
            <div class="riskTop">
                <div class="information_body_name">孕产妇妊娠风险评估</div>
                <div class="risk information_body_name" v-if="bottom">
                    <span v-if="bottom.riskLevel==1 || !bottom.riskLevel">
                        <span class="riskLow riskColor"></span>
                        <span class="riskContent">低风险</span>
                    </span>
                    <span v-if="bottom.riskLevel==2">
                        <span class="riskGeneral riskColor"></span>
                        <span class="riskContent">一般风险</span>
                    </span>
                    <span v-if="bottom.riskLevel==3">
                        <span class="riskHigher riskColor"></span>
                        <span class="riskContent">较高风险</span>
                    </span>
                    <span v-if="bottom.riskLevel==4">
                        <span class="riskHigh riskColor"></span>
                        <span class="riskContent">高风险</span>
                    </span>
                    <span v-if="bottom.riskLevel==5">
                        <span class="riskIll riskColor"></span>
                        <span class="riskContent">孕妇患有传染性疾</span>
                    </span>
                </div>
            </div>
            <div class="riskItmCom">
                <div
                    :class="itm.existRisk? 'riskItmCheck':'riskItm'"
                    v-for="(itm, idx) in riskList"
                    :key="idx"
                >
                    <div class="riskitm" @click="riskCheck(itm)">
                        <div class="ItmeBox">{{itm.description}}</div>
                    </div>
                    <div class="checkAg" v-if="itm.existRisk"></div>
                </div>
            </div>
        </div>
        <div class="btmItm">温馨提示：该数据将用于产检建册，严格保密。</div>
        <div class="btn">
            <div class="saveBtn" @click="previous">
                <span>上一步</span>
            </div>
            <div class="saveBtn" v-if="bottom.state==1" @click="handleClick">
                <span>确认提交</span>
            </div>
        </div>
    </div>
</template>
<script>
import "@/css/weui.css";
export default {
    name: "BasicInf",
    props: {
       
        disabled: {
            type: Boolean
        },
    },
    data() {
        return {
            bottom: null,
            riskList: null // 风险列表
        };
    },
    mounted() {
        this.getbottom();
    },
    methods: {
        previous() {
            var _this = this;
            _this.$emit("previous", 3);
        },
        handleClick() {
            var _this = this;
            uni.showModal({
                title: "提示",
                cancelText: "关闭",
                confirmText: "确认",
                content: "提交后不能修改，是否确认提交建档建册信息？",
                success(res) {
                    if (res.confirm) {
                        _this.$ajaxs
                            .post(
                                "/mobile/v1/pregnant/updatePregnantStatus?pregnantId=" +
                                    uni.getStorageSync("pregnantId")
                            )
                            .then(res => {
                                if (res.status == 200) {
                                    if (res.content) {
                                        var url = "../putOnRecord/success"; // 登录跳转页面
                                        uni.reLaunch({
                                            url: url
                                        });
                                    }
                                } else {
                                    uni.showToast({
                                        title: "网路不畅~",
                                        icon: "none"
                                    });
                                }
                            })
                            .catch(err => reject(err));
                    } else if (res.cancel) {
                    }
                }
            });
            //
        },
        getbottom() {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/pregnant/getGpregnant")
                .then(res => {
                    if (res.content) {
                        _this.bottom = res.content;
                        _this.getList(_this.bottom.id);
                    }
                })
                .catch(err => reject(err));
        },
        getList(id) {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/riskPregnant/list", {
                    pregnantId: id,
                    fillType: 1
                })
                .then(res => {
                    if (res.status == 200) {
                        _this.riskList = res.content;
                    } else {
                        uni.showToast({
                            title: "网路不畅~",
                            icon: "none"
                        });
                    }
                })
                .catch(err => reject(err));
        },
        riskCheck(itm) {
            if(this.disabled) return
            if (itm.existRisk) {
                // var obj={
                //   id: itm.configId
                // }
                this.delRisk(itm.configId);
            } else {
                var obj = {
                    pregnantId: this.bottom.id,
                    riskId: itm.id
                };
                this.saveRisk(obj);
            }
        },
        delRisk(obj) {
            var _this = this;
            _this.$ajaxs
                .post("/mobile/v1/riskPregnant/delete", obj)
                .then(res => {
                    if (res.status == 200) {
                        _this.getbottom();
                    } else {
                        uni.showToast({
                            title: "网路不畅~",
                            icon: "none"
                        });
                    }
                })
                .catch(err => reject(err));
        },
        saveRisk(obj) {
            var _this = this;
            _this.$ajaxs
                .post("/mobile/v1/riskPregnant/save", obj)
                .then(res => {
                    if (res.status == 200) {
                        _this.getbottom();
                    } else {
                        uni.showToast({
                            title: "网路不畅~",
                            icon: "none"
                        });
                    }
                })
                .catch(err => reject(err));
        },
        //排序方法
        compare(property) {
            return function(a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value1 - value2;
            };
        }
    }
};
</script>

<style scoped>
.listConBasic_f {
    background: #fff;
}
.listItm {
    height: 100upx;
    line-height: 100upx;
    border-bottom: 1px solid #ddd;
}
.listFlex {
    display: flex;
    justify-content: space-between;
}
.listCheckT {
    color: #999;
    padding-right: 8px;
}
.hiddenCom {
    visibility: hidden;
}

.btn {
    width: 100%;
    height: 64px;
    display: flex;
    padding: 0 70upx;
    justify-content: space-between;
}

.saveBtn {
    height: 80upx;
    width: 240upx;
    text-align: center;
    line-height: 80upx;
    border: 1px solid #fa4d93;
    border-radius: 40upx;
    color: #fa4d93;
    font-size: 32upx;
    background: #fff;
    margin: 0 40upx;
}
/* 111111 */
.riskTop {
    height: 210upx;
    width: 90%;
    margin: 0 auto;
}
.tips {
    color: #fa4d93;
    font-size: 24upx;
    padding-top: 8upx;
    padding-bottom: 14upx;
}
.riskColor {
    width: 30upx;
    height: 30upx;
    border-radius: 50%;
    display: inline-block;
}
.riskContent {
    color: #333;
    padding-left: 6upx;
    font-size: 28upx;
    position: relative;
    top: -2px;
}
.riskItmCom {
    width: 86%;
    min-height: 160upx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20upx;
}
.riskItm {
    width: 178upx;
    min-height: 120upx;
    border: 1px solid #979797;
    border-radius: 16upx;
    margin-bottom: 20upx;
    color: #666;
    font-size: 24upx;
    padding: 20upx;
    display: flex;
    justify-content: center;
    align-self: center;
    overflow: hidden;
    position: relative;
}
.riskItmCheck {
    width: 178upx;
    min-height: 120upx;
    border: 1px solid #fa4d93;
    border-radius: 16upx;
    margin-bottom: 20upx;
    color: #666;
    font-size: 24upx;
    padding: 20upx;
    display: flex;
    justify-content: center;
    align-self: center;
    overflow: hidden;
    position: relative;
}
.riskitm {
    text-align: center;
}
.checkAg {
    width: 42upx;
    height: 42upx;
    background: #fa4d93;
    position: absolute;
    transform: rotate(45deg);
    bottom: -20upx;
    right: -20upx;
}
.ItmeBox {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.information_body_name {
    text-align: center;
    height: 80upx;
    line-height: 80upx;
    font-size: 28upx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    border-bottom: 2upx dashed #d6d6d6;
}
</style>